<template>
  <div class="bg">
    <el-card class="box-card">
      <el-row type="flex" class="row-bg" justify="end">
        <el-col :span="4" :offset="3">
          <el-select v-model="value" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input style="width:220px" v-model="selectCode" placeholder="请输入商家名称/联系人/手机号码查询"></el-input>
        </el-col>
        <el-col :span="6">
          <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-col>

        <el-col :span="4">
          <div style="display:flex">
            <el-button type="primary" @click="searchDate">查询</el-button>
            <el-button type="success" @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格展示 -->
    <el-card class="card">
      <div slot="header">
        <el-row type="flex" justify="space-between">
          <el-col :span="2" :offset="22">
            <el-button type="success" @click="exports">导出数据</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 表格展示 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="index" type="index" width="100" label="序号" align="center"></el-table-column>
        <el-table-column prop="userName" label="用户昵称" align="center"></el-table-column>
        <el-table-column prop="userPhone" label="手机号码" align="center"></el-table-column>
        <el-table-column prop="questionBriefDesc" :show-overflow-tooltip="true" label="提问内容" align="center"></el-table-column>
        <el-table-column prop="questionsAnswerNumber" label="回答" align="center"></el-table-column>
        <el-table-column prop="questionsShareNumber" label="分享" align="center"></el-table-column>
        <el-table-column prop="questionCreateTime" label="时间" align="center"></el-table-column>
        <el-table-column prop="questionsStatus" label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.questionsStatus==1">进行中</span>
            <span v-if="scope.row.questionsStatus==2">已完成</span>
            <span v-if="scope.row.questionsStatus==3">已撤销</span>
            <span v-if="scope.row.questionsStatus==4">已采纳</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="280" align="center">
          <template slot-scope="scope">
            <el-button @click="look(scope.row)" type="primary" size="small">查看/编辑</el-button>
            <el-button @click="deleteData(scope.row)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
          background
          layout="total,  prev, pager, next, jumper"
          :total="total"
          :page-size="size"
          :current-page="current"
          @current-change="handleCurrentChange"
          style="margin-top:24px"
      ></el-pagination>
    </el-card>

    <!--    详情-->
    <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="30%"
      >
      <div>
        <div style="margin-bottom: 10px"><span style="font-size: 16px;font-weight: bold">用户昵称：</span> {{ userList.userName }}</div>
        <div style="margin-bottom: 10px">
          <span style="font-size: 16px;font-weight: bold">问题详情描述：</span>
          <el-input
              style="margin-top: 5px"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="userList.questionDesc">
          </el-input>
        </div>
        <div style="margin-bottom: 10px">
          <span style="font-size: 18px;font-weight: bold">问题简单描述：</span>
          <el-input
              style="margin-top: 5px"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="userList.questionBriefDesc">
          </el-input>
        </div>
        <div style="margin-bottom: 10px">
          <el-upload
              list-type="picture-card"
              :action="upadteurl"
              :file-list="newImg"
              :on-success="merchantPhoto"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">

            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
        <el-divider></el-divider>
        <div class="qwe">
          <div v-for="item in daAn "  :key="item.answerId" class="daAnStyle">
            <div style="font-weight:bold"> {{ item.userName }}：</div>
            <div class="centenStyle">
              {{ item.answerContent }}
            </div>
            <div>
              <el-button type="danger" v-if="item.answerValidity == '1'" @click="pingbi(item.answerId,'pb')">屏蔽</el-button>
              <el-button type="success" v-else @click="pingbi(item.answerId,'qy')">启用</el-button>
            </div>
          </div>
        </div>
        <div>

        </div>

      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">关闭</el-button>
    <el-button type="primary" @click="xgQuestionsAndAnswers()">确认修改</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import base from "@/views/api/base";
import {export2Excel} from "@/components/commom";

export default {
  name: "helperlist",
  data() {
    return {
      questionId: "",
      daAn: [],
      userList: [],
      upadteurl: "",
      newImg: [],
      dialogVisible: false,
      options: [{
        value: 1,
        label: '进行中'
      }, {
        value: 2,
        label: '已完成'
      }, {
        value: 3,
        label: '已撤销'
      }, {
        value: 4,
        label: '已采纳'
      }],
      value: "",
      value1: "",
      downloadLoading: false,
      tableData: [],
      merchantTotal: {}, //商家统计信息
      total: 0, //总条数
      size:10,
      current: 1, //第一页的数据加载
      selectCode: "", //查询条件
      selectCode1: "",
      firstdata: "", //开始时间
      endtime: "" //结束时间
    };
  },
  mounted() {
    this.getHelperlist()
    this.upadteurl = base.sq + "/yuanjiu/upload/uploadImg";
  },
  methods: {
    // 获取商户列表
    getHelperlist() {
      let param = {
        size: this.size,
        current: this.current,
        selectCode: this.selectCode,
        selectCode1: this.selectCode1,
        startDate: this.value1[0],
        endDate: this.value1[1],
        status: this.value,
      };
      this.$http.article.getQuestionsAndAnswers(param).then(res => {
        this.tableData = res.result.records; //加载数据
        this.total = res.result.total; //总条数
        console.log("获取商户列表", this.tableData);
      });
    },
    // 查询功能
    searchDate() {
      this.current = 1; //模糊查询
      this.getHelperlist();
    },
    // 分页功能
    handleCurrentChange(val) {
      this.current = val;
      this.getHelperlist();
    },
    // 重置功能
    reset() {
      this.selectCode = ""; //查询条件
      this.selectCode1 = ""; //查询条件
      this.value1 = ""; //开始时间
      this.value = ""
      // 重新加载数据
      this.getHelperlist();
    },
    //查看
    look(row) {
      console.log('333', row)
      this.newImg=[]
      this.questionId = row.questionId
      let list = {
        questionId: row.questionId
      }
      this.$http.article.xqQuestionsAndAnswers(list).then(res => {
        this.userList = res.result
        if (res.result.mediaList.length > 0) {
          res.result.mediaList.map((x) => {
            console.log(x)
            this.newImg.push({
              name: x,
              url: x
            })
          })
        }
        console.log()
      });
      this.getDaAn()
      this.dialogVisible = true

    },
    // 删除
    deleteData(row){
      let list = {
        questionId: row.questionId,
        questionIsDelete: 2,
      }
      this.$http.article.xgQuestionsAndAnswers(list).then(res => {
        this.$message.success('删除成功')
        this.getHelperlist()
      });

    },
    getDaAn() {
      let list = {
        questionId: this.questionId
      }
      this.$http.article.daQuestionsAndAnswers(list).then(res => {
        this.daAn = res.result.records
      });
    },
    // 照片
    merchantPhoto(res) {
      this.newImg.push({
            name: res.result,
            url: res.result
          }
      )
      console.log('上传成功', this.newImg)
    },
    //轮播图
    handleRemove(file, fileList) {
      console.log('file',file)
      console.log('fileList',fileList)

      // let index = fileList.indexOf(file);
      this.newImg = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.imgDialogVisible = true;
    },

    pingbi(answerId, type) {
      let list
      if (type == 'pb') {
        list = {
          answerId: answerId,
          answerValidity: 2
        }
      } else {
        list = {
          answerId: answerId,
          answerValidity: 1
        }
      }

      this.$http.article.pbQuestionsAndAnswers(list).then(res => {
        console.log('详情', res)
        this.$message.success('修改成功')
        this.getDaAn()
      });

    },

    //修改问题
    xgQuestionsAndAnswers(){
      let urlList = []
      this.newImg.forEach((x) => {
        urlList.push(x.url)
      });
      urlList =  urlList.join(',');

      let list = {
        questionId: this.questionId,
        mediaList: urlList,
        questionDesc:this.userList.questionDesc,
        questionBriefDesc:this.userList.questionBriefDesc
      }
      console.log('list',list)
      this.$http.article.xgQuestionsAndAnswers(list).then(res => {
        this.$message.success('修改成功')
        this.dialogVisible =false
        this.getHelperlist()
      });
    },

    //   导出
    exports() {
      this.getHelperlist();
      const hader = [
        {
          title: "用户昵称",
          date: "userName"
        },
        {
          title: "手机号码  ",
          date: "userPhone"
        },
        {
          title: "提问内容",
          date: "questionBriefDesc"
        },
        {
          title: "回答",
          date: "questionsAnswerNumber"
        },
        {
          title: "分享",
          date: "questionsShareNumber"
        },
        {
          title: "时间",
          date: "questionCreateTime"
        },
        {
          title: "状态",
          date: "questionsStatus"
        }
      ];

      const excelName = "问答管理";

      let param = {
        size: 10,
        current: this.current,
        selectCode: this.selectCode,
        selectCode1: this.selectCode1,
        startDate: this.value1[0],
        endDate: this.value1[1],
        status: this.value,
      };
      this.$http.article.getQuestionsAndAnswers(param).then(res => {
        const list = res.result.records.map(item => {
          console.log('item',item)
          //因为有枚举类型，所以这里对数据进行处理
          if (item.questionsStatus) {
            switch(item.questionsStatus){
              case  1:
                item.questionsStatus=  "进行中"
                break;
              case  2:
                item.questionsStatus=  "已完成"
                break;
              case  3:
                item.questionsStatus=  "已撤销"
                break;
              case  4:
                item.questionsStatus=  "已采纳"
                break;

            }
          }
          return item;
        });
        export2Excel(hader, list, excelName);
      });
    },

  }
}
</script>

<style scoped lang="scss" scoped>
.qwe {
  height: 300px;
  overflow-y: scroll;
}

.daAnStyle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;

  .centenStyle {
    width: 50%;
  }
}

.merchantData {
  display: flex;
  align-items: center;
  padding-top: 14px;

  .addmerchant {
    color: #409eff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }

  .merchantNum {
    color: #f23a3a;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 800;
  }
}

.clearfix {
  padding-bottom: 20px;
}

.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  padding-top: 10px;
}

.box-card {
  width: 98%;
  height: 80px;
  margin: 0 auto;
}

.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>